
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Rich Text Editor: Using the Editor's Instance</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">

<!--there is no custom header content for this example-->

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Rich Text Editor: Using the Editor's Instance</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Rich Text Editor: Using the Editor's Instance</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>Use the Editor's instance to query the iframe</p>
	</div>

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="editor-instance_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<style>
    #editor_cont {
        width: 600px;
        border: 1px solid #999;
        margin: 2em;
        background-color: #f2f2f2;
    }
    #editor {
        height: 265px;
        background-color: #fff;
    }
    #buttons, #out {
        padding: 10px;
    }
    #buttons {
        border-bottom: 1px solid #999;
    }
    #out {
        font-weight: bold;
        border-top: 1px solid #999;
    }
</style>

<p>Click the buttons below to query the Editor for its contents. You can even modify the contents and click them again to see the difference.</p>

<div id="editor_cont">
    <div id="buttons">
        <button id="btags"># B tags?</button>
        <button id="itags"># I tags?</button>
        <button id="ctags"># with class foo?</button>
    </div>
    <div id="editor"></div>
    <div id="out">&nbsp;</div>
</div>

<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<script>

YUI().use('editor', function(Y) {

    var log = function(str) {
        Y.one('#out').set('innerHTML', str);
    };

    //Create the Base Editor
    var editor = new Y.EditorBase({
        content: '<p><b>This is <i class="foo">a test</i></b></p><p><b style="color: red; font-family: Comic Sans MS">This is <span class="foo">a test</span></b></p>',
        extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }'
    });
    //Rendering the Editor
    editor.render('#editor');

    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('b');
        
        log('There are (' + bs.size() + ') B tags in the iframe.');
    }, '#btags');

    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('i');
        
        log('There are (' + bs.size() + ') I tags in the iframe.');
    }, '#itags');

    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('.foo');
        
        log('There are (' + bs.size() + ') items with class foo in the iframe.');
    }, '#ctags');

});
</script>

	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<h3>Working with EditorBase</h3>
<p><code>EditorBase</code> is not a fully functional Editor, it is simply the base utility that will be used under the hood to create an Editor.</p>

<p>When the Editor is created, it creates a YUI instance inside itself and attaches that instance to the editable iframe. 
This means that you now have the full power of YUI 3 inside the Editor iframe. You can use Event, Stylesheet, Node and even DD
inside the iframe, without having to load all the JavaScript inside the document. In this example we will show how to use the 
internal YUI instance to get Node instances from the Editor. </p>

<p>Getting access to this instance is simple. Just use the <code>getInstance</code> method on the Editor instance.</p>


<h3>Creating the Editor</h3>
<p>In this step we are going to do the initial render of the Editor, set its content, and focus it when it's ready.</p>
<div id="syntax-a18bbe5fbac2c71a6ddb2f0ab3100b3a" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'editor'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Create the Base Editor</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> editor <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">EditorBase</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        content<span class="sy0">:</span> <span class="st0">'&lt;p&gt;&lt;b&gt;This is &lt;i class=&quot;foo&quot;&gt;a test&lt;/i&gt;&lt;/b&gt;&lt;/p&gt;&lt;p&gt;&lt;b style=&quot;color: red; font-family: Comic Sans MS&quot;&gt;This is &lt;span class=&quot;foo&quot;&gt;a test&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        extracss<span class="sy0">:</span> <span class="st0">'.foo { font-weight: normal; color: black; background-color: yellow; }'</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Rendering the Editor</span></div></li><li class="li2"><div class="de2">    editor.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">'#editor'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'editor'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    <span class="co1">//Create the Base Editor</span>
    <span class="kw2">var</span> editor <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">EditorBase</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        content<span class="sy0">:</span> <span class="st0">'&lt;p&gt;&lt;b&gt;This is &lt;i class=&quot;foo&quot;&gt;a test&lt;/i&gt;&lt;/b&gt;&lt;/p&gt;&lt;p&gt;&lt;b style=&quot;color: red; font-family: Comic Sans MS&quot;&gt;This is &lt;span class=&quot;foo&quot;&gt;a test&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;'</span><span class="sy0">,</span>
        extracss<span class="sy0">:</span> <span class="st0">'.foo { font-weight: normal; color: black; background-color: yellow; }'</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Rendering the Editor</span>
    editor.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">'#editor'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-a18bbe5fbac2c71a6ddb2f0ab3100b3a-plain">YUI().use('editor', function(Y) {

    //Create the Base Editor
    var editor = new Y.EditorBase({
        content: '<p><b>This is <i class="foo">a test</i></b></p><p><b style="color: red; font-family: Comic Sans MS">This is <span class="foo">a test</span></b></p>',
        extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }'
    });
    
    //Rendering the Editor
    editor.render('#editor');

});</textarea></div>
<h3>Full Example Source</h3>
<p></p>
<div id="syntax-8cec8b6bb45a1f6a326692670bfaeb25" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'editor'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> log <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>str<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#out'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> str<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Create the Base Editor</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> editor <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">EditorBase</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        content<span class="sy0">:</span> <span class="st0">'&lt;p&gt;&lt;b&gt;This is &lt;i class=&quot;foo&quot;&gt;a test&lt;/i&gt;&lt;/b&gt;&lt;/p&gt;&lt;p&gt;&lt;b style=&quot;color: red; font-family: Comic Sans MS&quot;&gt;This is &lt;span class=&quot;foo&quot;&gt;a test&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        extracss<span class="sy0">:</span> <span class="st0">'.foo { font-weight: normal; color: black; background-color: yellow; }'</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Rendering the Editor</span></div></li><li class="li1"><div class="de1">    editor.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">'#editor'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> inst <span class="sy0">=</span> editor.<span class="me1">getInstance</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            bs <span class="sy0">=</span> inst.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'b'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        log<span class="br0">&#40;</span><span class="st0">'There are ('</span> <span class="sy0">+</span> bs.<span class="me1">size</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">+</span> <span class="st0">') B tags in the iframe.'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">'#btags'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> inst <span class="sy0">=</span> editor.<span class="me1">getInstance</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            bs <span class="sy0">=</span> inst.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'i'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">        log<span class="br0">&#40;</span><span class="st0">'There are ('</span> <span class="sy0">+</span> bs.<span class="me1">size</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">+</span> <span class="st0">') I tags in the iframe.'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">'#itags'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="kw2">var</span> inst <span class="sy0">=</span> editor.<span class="me1">getInstance</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            bs <span class="sy0">=</span> inst.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'.foo'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        log<span class="br0">&#40;</span><span class="st0">'There are ('</span> <span class="sy0">+</span> bs.<span class="me1">size</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">+</span> <span class="st0">') items with class foo in the iframe.'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">'#ctags'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'editor'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    <span class="kw2">var</span> log <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>str<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#out'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> str<span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Create the Base Editor</span>
    <span class="kw2">var</span> editor <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">EditorBase</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        content<span class="sy0">:</span> <span class="st0">'&lt;p&gt;&lt;b&gt;This is &lt;i class=&quot;foo&quot;&gt;a test&lt;/i&gt;&lt;/b&gt;&lt;/p&gt;&lt;p&gt;&lt;b style=&quot;color: red; font-family: Comic Sans MS&quot;&gt;This is &lt;span class=&quot;foo&quot;&gt;a test&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;'</span><span class="sy0">,</span>
        extracss<span class="sy0">:</span> <span class="st0">'.foo { font-weight: normal; color: black; background-color: yellow; }'</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="co1">//Rendering the Editor</span>
    editor.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">'#editor'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> inst <span class="sy0">=</span> editor.<span class="me1">getInstance</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span>
            bs <span class="sy0">=</span> inst.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'b'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        log<span class="br0">&#40;</span><span class="st0">'There are ('</span> <span class="sy0">+</span> bs.<span class="me1">size</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">+</span> <span class="st0">') B tags in the iframe.'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">'#btags'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> inst <span class="sy0">=</span> editor.<span class="me1">getInstance</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span>
            bs <span class="sy0">=</span> inst.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'i'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        log<span class="br0">&#40;</span><span class="st0">'There are ('</span> <span class="sy0">+</span> bs.<span class="me1">size</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">+</span> <span class="st0">') I tags in the iframe.'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">'#itags'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> inst <span class="sy0">=</span> editor.<span class="me1">getInstance</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span>
            bs <span class="sy0">=</span> inst.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'.foo'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        log<span class="br0">&#40;</span><span class="st0">'There are ('</span> <span class="sy0">+</span> bs.<span class="me1">size</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">+</span> <span class="st0">') items with class foo in the iframe.'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">'#ctags'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-8cec8b6bb45a1f6a326692670bfaeb25-plain">YUI().use('editor', function(Y) {

    var log = function(str) {
        Y.one('#out').set('innerHTML', str);
    };

    //Create the Base Editor
    var editor = new Y.EditorBase({
        content: '<p><b>This is <i class="foo">a test</i></b></p><p><b style="color: red; font-family: Comic Sans MS">This is <span class="foo">a test</span></b></p>',
        extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }'
    });
    //Rendering the Editor
    editor.render('#editor');

    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('b');
        
        log('There are (' + bs.size() + ') B tags in the iframe.');
    }, '#btags');

    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('i');
        
        log('There are (' + bs.size() + ') I tags in the iframe.');
    }, '#itags');

    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('.foo');
        
        log('There are (' + bs.size() + ') items with class foo in the iframe.');
    }, '#ctags');

});</textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Rich Text Editor Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li class='selected'><a href='../editor/editor-instance.html'>Using the Editor's Instance</a></li><li><a href='../editor/editor-events.html'>Using the Editor's Events</a></li><li><a href='../editor/editor-nodechange.html'>Using the Editor's nodeChange Event</a></li><li><a href='../editor/editor-exec.html'>Creating ExecCommands</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More Rich Text Editor Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/editor/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_editor.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
